<script setup>
import { ref } from 'vue';
import BaseTable from '@/components/table/BaseTable.vue';
import BaseButton from "@/components/Button/BaseButton.vue";
import BaseInput from "@/components/Input/BaseInput.vue";
import BaseIcon from "@/components/Icon/BaseIcon.vue";
import BaseCombobox from "@/components/Combobox/BaseCombobox.vue";

// 示例数据
const headers = ref([
  { text: '姓名', value: 'name', sortable: true },
  { text: '年龄', value: 'age', sortable: true },
  { text: '职业', value: 'job', slot: 'job-cell' },
  { text: '操作', value: 'actions', slot: 'actions-cell' }
]);

const users = ref([
  { id: 1, name: '张三', age: 28, job: '前端工程师', status: 'active' },
  { id: 2, name: '李四', age: 35, job: '产品经理', status: 'active' },
  { id: 3, name: '王五', age: 32, job: 'UI设计师', status: 'inactive' }
]);

// 处理排序事件
const handleSort = (sortInfo) => {
  console.log('排序变更:', sortInfo);
  // 实现排序逻辑

};

const selectedUser = ref(null);


const keyword = ref('');

</script>

<template>

  <div style="display: flex;">
    <BaseIcon name="excel"></BaseIcon>
    <BaseButton icon="weixin" type="primary">添加用户</BaseButton>
    <BaseInput v-model="keyword" placeholder="搜索用户" style="margin-left: 10px;" >
    </BaseInput>

    <BaseCombobox
        v-model="selectedUser"
        :options="users"
        placeholder="选择用户"
        label-key="name"
        value-key="id"
        clearable
        style="width: 300px;"
    >
    </BaseCombobox>
  </div>

  <BaseTable
      :headers="headers"
      :data="users"
      emptyText="没有找到用户数据"
      @sort-change="handleSort"
  >
    <!-- 自定义职业列 -->
    <template #job-cell="{ value }">
      <span class="job-tag">{{ value }}</span>
    </template>

    <!-- 自定义操作列 -->
    <template #actions-cell="{ row }">
      <BaseButton @click="editUser(row)">编辑</BaseButton>
      <BaseButton @click="deleteUser(row.id)">删除</BaseButton>
    </template>
  </BaseTable>
</template>

<style scoped>
.job-tag {
  background-color: #e0f7fa;
  padding: 4px 8px;
  border-radius: 4px;
}
</style>